<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title>
   <script type="text/javascript">
        function createXmlHttpRequest(){
            var xmlHttpRequest;
            if(window.ActiveXObject){  //ie浏览器
                xmlLHttpRequest=new ActiveXObject("microsoft.xmlhttp");
            }else{    //非ie浏览器  创建核心对象
                xmlHttpRequest=new XMLHttpRequest();
            }
            return xmlHttpRequest;
        }
        function checkUserName(content){
            var spanElement=document.getElementById("resID");
            //获取到文本框里输入的内容
            if(4==content.length){
                //利用Ajax方式发送到服务器端
                var xmlhttp=createXmlHttpRequest();
                //创建核心对象
                xmlhttp.open("GET","/project06/servlet/checkusernameforservlet?timetest="+new Date().getTime()+"&username="+content,true);
                xmlhttp.onreadystatechange=function(){
                    if(xmlhttp.readyState==4){
                        if(200==xmlhttp.status){
                            var result=xmlhttp.responseText;
                            spanElement.innerHTML=result;
                        }
                    }
                };
                xmlhttp.send(null);
            }else{
                spanElement.innerHTML="";
            }
        }
    </script>
</head>
<body>
  <form>
	用户名[GET]：<input id="usernameID" type="text" name="username" maxlength="4" onkeyup="checkUserName(this.value)"/><br>
	密码：<input id="usernameID" type="password" name="username" maxlength="4"/><br>
	<input type="submit" value="提交">
	光标移出后，立即检查结果
  </form>
  <button onclick="createXmlHttpRequest()">test</button><hr>
  <span id="resID"></span>
</body>
</html>